<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-view_H charts-tabbar">
			<block v-for="(item,index) in tab" >
				<view class="item" :class="{'active':index == curr}" @click="tabChange(index)">
				{{ item }}
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "scroll-bar",
		props: {
			tab: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				curr:0
			};
		},
		methods:{
			tabChange(index){
				if(index == this.curr) return
				
				this.curr = index
				this.$emit("change",index)
			},
		}
	}
</script>

<style lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.charts-tabbar {
		padding: 25upx 0;

		.item {
			display: inline-block;
			margin-right: 20upx;
			min-width: 106upx;
			padding: 20upx;
			text-align: center;
			box-sizing: border-box;

			&.active {
				color: #fff;
				background: #00A0E9;
				border-radius: 6upx;
			}
		}
	}
</style>
